Skip to content

Fix miniapp bottom padding with platform detection#610

Merged
realproject7 merged 1 commit intomainfrom
task/608-miniapp-padding-v2
Mar 27, 2026
Merged

Fix miniapp bottom padding with platform detection#610
realproject7 merged 1 commit intomainfrom
task/608-miniapp-padding-v2

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

Fixes #608

  • Use usePlatformDetection() hook to detect miniapp environments instead of relying on env(safe-area-inset-bottom) which returns 0 in Farcaster/Base webviews
  • MobileActionBar fixed bar: pb-8 when isMiniApp, else existing safe-area padding
  • MobileActionBar bottom sheet: pb-10 when isMiniApp, else existing safe-area padding
  • ReadingMode bottom nav: pb-8 when isMiniApp, else existing safe-area padding
  • Regular mobile browser and desktop layouts unaffected (safe-area fallback preserved)

Test plan

  • Farcaster miniapp: MobileActionBar buttons fully visible with extra padding
  • Farcaster miniapp: Reading Mode prev/contents/next fully visible
  • Base App: same bottom UI fully visible
  • Regular mobile browser: no extra padding (uses safe-area-inset)
  • Desktop: no layout change
  • Build passes

🤖 Generated with Claude Code

Use usePlatformDetection() hook instead of env(safe-area-inset-bottom)
for miniapp environments where CSS environment variables return 0.
When isMiniApp is true, apply explicit Tailwind padding (pb-8/pb-10).
Regular browser and desktop layouts use the existing safe-area-inset
fallback. Applied to MobileActionBar (fixed bar + bottom sheet) and
ReadingMode bottom nav.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
plotlink Ignored Ignored Mar 27, 2026 6:31pm

Request Review

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The PR replaces the ineffective env-based miniapp padding with the existing platform-detection hook and applies explicit bottom padding to the exact fixed-bottom elements called out in issue #608.

Findings

  • None.

Decision

Approved because the change matches issue #608, stays tightly scoped to the affected components, and preserves regular browser and desktop behavior by only adding the extra padding when isMiniApp is true.

@realproject7 realproject7 merged commit 98b071f into main Mar 27, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix miniapp bottom padding — env(safe-area-inset-bottom) has no effect in Farcaster webview

2 participants